<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_header_include::frag(~{::title},~{::style},~{::link})">
  <title>后台管理系统</title>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/element-ui.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="" id="skinCss">
  <style>
    .optimizeClueManagement {
      font-size: 14px;
      background: #f3f7fe;
    }

    .el-breadcrumb {
      margin-bottom: 10px;
    }

    button a {
      color: #fff !important;
    }

    .formItem,
    .formItem .el-form-item__content {
      width: 100%
    }

    .fontColor {
      color: #000;
    }

    .fontColor1 {
      color: #57586C
    }

    .fontColor3 {
      color: #FF5C5C
    }

    .fontSize18 {
      font-size: 18px;
    }

    .marign30 {
      margin-top: 30px;
    }

    .marign14 {
      margin-top: 14px;
    }

    .title {
      height: 36px;
      line-height: 36px;
    }

    .grid-content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      flex-grow: 1;
    }

    .grid-content ul {
      margin-left: 10px;
    }

    .grid-content img.resourse-user-photo {
      width: 58px;
      height: 58px;
      margin-right: 32px;
    }

    .resourse-user-info li {
      height: 40px;
      line-height: 40px;
    }

    .resourse-user-info li span {
      float: left;
      display: inline;
    }

    .resourse-user-info li span:first-child {
      width: 70px;
      text-align: right;
    }

    .row-bg {
      padding: 30px;
      background: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: 0px 0px 29px 10px rgba(77, 129, 255, 0.1);
      border-radius: 8px;
    }

    .resourse-entry {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      background: #ECEFF6;
      padding: 10px 30px 30px 30px;
      margin-bottom: 30px;
      border-radius: 6px;

    }

    .resourse-online-log {
      height: 56px;
      line-height: 56px;
      border-bottom: 1px solid #E2E2E2;
      margin-bottom: 20px;
    }

    .resourse-user-name {
      margin-left: 100px
    }

    .resorse-ad-time {}

    .resourse-ad-main {
      margin-left: 15px;
      width: calc(100% - 60px)
    }

    .resourse-online-box {
      background: #fff;
      border-radius: 6px;
      padding: 36px
    }


    .resourse-ad-main h3 {
      height: 44px;
      line-height: 44px;
      font-weight: normal;
    }

    .resourse-ad-link {
      display: block;
      margin-top: 26px;
      width: 429px;
      line-height: 46px;
    }

    a.resourse-ad-link img {
      border-radius: 6px;
      width: 100%;
      height: 100%;
    }

    .resorse-ad-time div {
      width: 44px;
      height: 43px;
      background: #fff;
      margin-left: -32px;
      padding: 3px 0 0 10px;

    }



    .resourse-online-more {
      text-align: center;
      font-size: 16px;
      padding: 38px 0 16px 0;
      cursor: pointer;
    }

    .arrow-down {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-top: 1px solid #656565;
      border-right: 1px solid #656565;
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
      margin: 0 auto 30px;
      cursor: pointer;
      margin-left: 60px;
    }

    .row-nopadding {
      padding: 0
    }


    .el-dialog__header {
      background: #fff;
    }

    .el-dialog__header:before {
      width: 122px;
      height: 86px;
      background-size: 122px 86px;
    }

    .el-dialog__title {
      color: #4C4E67
    }

    .dialog-center {
      justify-content: center;
    }

    .dialog-center .resourse-user-info li span:first-child {
      text-align: right;
      padding-right: 20px;
    }

    .dialog-center .resourse-user-info {
      margin-left: 0;
      min-width: 290px;
    }

    .dialog-center .resourse-user-info li span:first-child {
      width: 86px;
    }

    .code-width {
      width: 100px;
      height: 100px;
    }

    .resourse-phone-box {
      overflow: hidden;
      zoom: 1;
      padding: 0 10%;
    }

    .resourse-phone-box li {
      width: 50%;
      float: left;
      display: inline;
    }

    .no-phone {
      text-align: center;
      margin-top: 30px;
    }

    .resourse-phone-box li span:first-child {
      text-align: right;
      margin-right: 5px;
    }

    .maxWidth500 {
      max-width: 500px;
      height: auto;
    }

    .msg-more {
      margin: 0 auto;
    }

    .online-msg li {
      padding: 10px 0;
    }

    .resourse-online-box .row-bg {
      box-shadow: 0px 0px 0px 0px rgba(77, 129, 255, 0);
    }

    .resourse-user-info li span.resourse-mediu:first-child {
      width: auto;
    }

    .resourse-message span.fontColor1 {
      width: calc(100% - 70px);
      max-height: 150px;
      overflow-y: auto;
    }

    .resourse-mbox {
      width: 50%;
    }

    .resourse-online-box .listBox {
      max-height: 500px;
      overflow: auto;
    }

    .resourse-online-box .listBox ul li p span {
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-wrap !important;
    }

    .resourse-online-box .listBox.listScroll {
      overflow-y: scroll;
    }

    .resourse-info-box .row-bg {
      padding: 30px;
    }

    h3 {
      /* margin-top: 7px; */
    }
  </style>
</head>

<body>
  <div id="optimizeClueManagement" class="optimizeClueManagement mainPadding">
    <el-breadcrumb separator="/" class="elBreadcrumb">
      <el-breadcrumb-item>Home</el-breadcrumb-item>
      <el-breadcrumb-item>资源列表</el-breadcrumb-item>
      <el-breadcrumb-item>用户行为轨迹</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <h3 class="fontColor fontSize14 title marign14">
      用户行为轨迹
    </h3> -->
    <div class="row-bg el-row--flex" justify="space-around">
      <div class="grid-content">
        <img v-if="usrIcon==1" th:src="@{/images/user_photo.png}" class="resourse-user-photo marign30" />
        <img v-else-if="usrIcon==2" th:src="@{/images/user_photo2.png}" class="resourse-user-photo marign30" />
        <ul class="resourse-user-info">
          <li>
            <span>地域：</span><span class="fontColor1"> {{initResourcesObj.area}} </span>
          </li>
          <li>
            <span>终端：</span><span class="fontColor1"> {{initResourcesObj.terminal}} </span>
          </li>
          <li>
            <span>手机：</span><span class="fontColor3"> {{initResourcesObj.phone}} <strong class="fontColor2"
                @click="dialogFormVisible = true" v-if="initResourcesObj.phone2">/ 查看多个手机号</strong></span>
          </li>
        </ul>
      </div>
      <div class="grid-content bg-purple-light">
        <ul class="resourse-user-info">
          <li>
            <span>客户姓名：</span><span class="fontColor1"> {{initResourcesObj.cusName}} </span>
          </li>
          <li>
            <span>QQ：</span><span class="fontColor1"> {{initResourcesObj.qq}} </span>
          </li>
          <li>
            <span>性别：</span><span class="fontColor1"> {{initResourcesObj.sex}} </span>
          </li>
        </ul>
      </div>
      <div class="grid-content bg-purple">
        <ul class="resourse-user-info">
          <li>
            <span>微信：</span><span class="fontColor1"> {{initResourcesObj.wechat}} <strong class="fontColor2"
                @click="openWechat" v-if="initResourcesObj.wechat2">/ 二维码</strong></span>
          </li>
          <li>
            <span>邮箱：</span><span class="fontColor1"> {{initResourcesObj.email}} </span>
          </li>
          <li>
            <span>年龄：</span><span class="fontColor1"> {{initResourcesObj.age}} </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="row-bg">
      <div class="resourse-ad-box">
        <div class="resorse-ad-time">
          <div><span>
              {{initResourcesObj.putTime}}
            </span></div>
        </div>
        <div class="resourse-ad-main">
          <h3>广告投放落地页</h3>
          <a class="resourse-ad-link" :href="initResourcesObj.url" target="_blank">
            <!-- <img :src="initResourcesObj.imageUrl"> -->
            <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572510650804&di=644c8892cd40032b80d52a13b92ffec9&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F359b033b5bb5c9eac1754f45df39b6003bf3b396.jpg" alt=""> -->
            <b class="fontColor5">点击</b>查看广告落地页
          </a>
        </div>
      </div>
      <div class="resourse-ad-box">
        <div class="resorse-ad-time">
          <div><span>{{initResourcesObj.putTime}}</span></div>
        </div>
        <div class="resourse-ad-main">
          <h3>广告投放渠道</h3>
          <div class="resourse-entry">
            <ul class="resourse-user-info">
              <li>
                <span class="resourse-mediu">媒介：</span><span class="fontColor1"> {{initResourcesObj.source}} </span>
              </li>
              <li>
                <div>广告投放方式</div>
              </li>
              <li>
                <span>资源类别：</span><span> {{initResourcesObj.category}} </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="resourse-ad-box">
        <div class="resorse-ad-time">
          <div><span>{{initResourcesObj.consultTime}}</span></div>
        </div>
        <div class="resourse-ad-main">
          <h3>客户咨询详情</h3>
          <div class="resourse-entry">
            <div class="resourse-online-log">在线聊天记录</div>
            <ul class="resourse-user-info">
              <li>
                <span>客户姓名：</span><span class="fontColor1"> {{initResourcesObj.cusName}} </span>
                <span class="resourse-user-name">在线客服：</span><span class="fontColor1"></span>
              </li>
              <li>
                <span>聊天内容：</span>
              </li>
            </ul>
            <!-- 在线客服 -->
            <div class="resourse-online-box">
              <div :class="['listBox',{'listScroll':isActive}]">
                <ul class="online-msg">
                  <li v-for="(item,i) in onlineRecordData" :key="item.id">
                    <p class="fontColor2" v-if="item.fromType==0">
                      <span>在线客服</span>
                      <span> {{item.messageTime}}</span>
                    </p>
                    <p class="fontColor3" v-if="item.fromType==1">
                      <span>{{initResourcesObj.cusName}}</span>
                      <span> {{item.messageTime}}</span>
                    </p>
                    <p style="padding:0 10px;">
                      <span v-if="item.messageType==3"><img :src="initResourcesObj.wechatCode" alt=""
                          class="maxWidth500"></span>
                      <span v-else>{{item.message}}</span>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="msg-more" @click="isActiveFun">
              <div class="resourse-online-more">
                加载更多聊天记录
              </div>
              <div class="arrow-down"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="resourse-ad-box">
        <div class="resorse-ad-time">
          <div><span>{{initResourcesObj.createTime}}</span></div>
        </div>
        <div class="resourse-ad-main">
          <h3>客户详情信息</h3>
          <div class="resourse-entry">
            <div class="resourse-online-log fontColor3">线索ID：{{clueId}}</div>
            <ul class="resourse-user-info">
              <li>
                <span style="text-align: left">资源信息</span>
              </li>
            </ul>
            <div class="resourse-info-box">
              <div class="row-bg row-nopadding  el-row--flex" style="box-shadow: none">
                <div class="grid-content bg-purple-light resourse-mbox">
                  <ul class="resourse-user-info">
                    <li class="resourse-message">
                      <span>留言时间：</span><span class="fontColor1"> {{initResourcesObj.messageTime}} </span>
                    </li>
                    <li class="resourse-message">
                      <span>搜索词：</span><span class="fontColor1"> {{initResourcesObj.searchWord}} </span>
                    </li>
                  </ul>
                </div>
                <div class="grid-content bg-purple-light resourse-mbox">
                  <ul class="resourse-user-info">
                    <li class="resourse-message">
                      <span>留言重点：</span><span class="fontColor1"> {{initResourcesObj.messagePoint}} </span>
                    </li>
                    <li class="resourse-message">
                      <span>资源项目：</span><span class="fontColor1"> {{initResourcesObj.projectName}} </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- <ul class="resourse-user-info">
              <li>
                <span>基本信息</span>
              </li>
            </ul> -->
            <!-- <div class="resourse-online-box">
              <div class="row-bg row-nopadding  el-row--flex">
                <div class="grid-content bg-purple-light">
                  <ul class="resourse-user-info">
                    <li>
                      <span>客户姓名：</span><span class="fontColor1"> {{initResourcesObj.cusName}} </span>
                    </li>
                    <li>
                      <span>手机：</span><span class="fontColor3"> {{initResourcesObj.phone}} <strong class="fontColor2"
                          @click="dialogFormVisible = true">/ 查看多个手机号</strong></span>
                    </li>
                    <li>
                      <span>QQ：</span><span class="fontColor1"> {{initResourcesObj.qq}} </span>
                    </li>
                    <li>
                      <span>性别：</span><span class="fontColor1"> {{initResourcesObj.sex}} </span>
                    </li>
                  </ul>
                </div>
                <div class="grid-content bg-purple">
                  <ul class="resourse-user-info">
                    <li>
                      <span>微信：</span><span class="fontColor1"> {{initResourcesObj.wechat}} <strong class="fontColor2"
                          @click="openWechat">/
                          二维码</strong></span>
                    </li>
                    <li>
                      <span>邮箱：</span><span class="fontColor1"> {{initResourcesObj.email}} </span>
                    </li>
                    <li>
                      <span>年龄：</span><span class="fontColor1"> {{initResourcesObj.age}} </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="resourse-ad-box">
        <div class="resorse-ad-time">
          <div><span>{{initResourcesObj.assignTime}}</span></div>
        </div>
        <div class="resourse-ad-main">
          <h3>资源分发到商家</h3>
        </div>
      </div>
    </div>
    <el-dialog title="查看微信" :visible.sync="wechatVisible" width="540px">
      <template>
        <div class="grid-content bg-purple-light dialog-center">
          <ul class="resourse-user-info">
            <li>
              <span>微信:</span><span class="fontColor1"> {{initResourcesObj.wechat}} </span>
            </li>
            <li v-if="initResourcesObj.wechat2">
              <span>微信2:</span><span class="fontColor1"> {{initResourcesObj.wechat2}} </span>
            </li>
            <li v-if="initResourcesObj.wechatCode">
              <span>微信二维码:</span><span><img class="code-width" :src="initResourcesObj.wechatCode"> </span>
            </li>
          </ul>
        </div>
      </template>
    </el-dialog>
    <!-- 查看手机号 -->
    <el-dialog title="客户手机号" :visible.sync="dialogFormVisible" width="540px">
      <template>
        <div class="no-phone" v-if="!initResourcesObj.phone">无数据</div>
        <ul class="resourse-user-info resourse-phone-box">
          <li>
            <span v-if="initResourcesObj.phone">手机号1:</span><span class="fontColor1"> {{initResourcesObj.phone}} </span>
          </li>
          <li>
            <span v-if="initResourcesObj.phone2">手机号2:</span><span class="fontColor1"> {{initResourcesObj.phone2}}
            </span>
          </li>
          <li>
            <span v-if="initResourcesObj.phone3">手机号3:</span><span class="fontColor1"> {{initResourcesObj.phone3}}
            </span>
          </li>
          <li>
            <span v-if="initResourcesObj.phone4">手机号4:</span><span class="fontColor1"> {{initResourcesObj.phone4}}
            </span>
          </li>
          <li>
            <span v-if="initResourcesObj.phone5">手机号5:</span><span class="fontColor1"> {{initResourcesObj.phone5}}
            </span>
          </li>
        </ul>
      </template>
    </el-dialog>
  </div>
</body>

<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>

<!-- import common js-->
<script th:inline="javascript">

  var oLink = document.getElementById("skinCss");
  if (getCookieVal("skinVal")) {
    oLink['href'] = "/css/common/resource" + getCookieVal("skinVal") + ".css";
  } else {
    oLink['href'] = "/css/common/resource1.css";
  }
  function getQueryString(name) {//获取url地址栏参数的方法
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
  }
  // var clueId = [[${clueId}]];//资源ID
  var clueId = getQueryString("clueId");//资源ID

  var phone = getQueryString("phone");//资源ID

  var ocmVM = new Vue({
    el: '#optimizeClueManagement',
    data: function () {
      return {
        initResourcesObj: {},
        wechatVisible: false,//查看微信二维码
        dialogFormVisible: false,
        isShowMoreBtn: false,
        isActive: false,
        clueId: clueId,
        isShowOnlineRecordBtn: false,
        onlineRecordData: [],
        usrIcon: getCookieVal("skinVal") ? getCookieVal("skinVal") : 2

      }
    },
    methods: {
      add0(m) { return m < 10 ? '0' + m : m },
      format(shijianchuo) {
        //shijianchuo是整数，否则要parseInt转换
        if (shijianchuo) {
          var time = new Date(shijianchuo);
          console.log(time, shijianchuo);

          var y = time.getFullYear();
          var m = time.getMonth() + 1;
          var d = time.getDate();
          var h = time.getHours();
          var mm = time.getMinutes();
          var s = time.getSeconds();
          // return this.add0(m) + '.' + this.add0(d) ;
          return m + '.' + d;
        } else {
          return ''
        }
      },
      initResources() {
        // this.initResourcesObj = {
        //   area: '北京', // 地域
        //   terminal: '地移动端/pc端域',// 终端
        //   phone: '17011323232',
        //   phone2: '14011323232',
        //   phone3: '13011323232',
        //   phone4: '12011323232',
        //   phone5: '16011323232',
        //   cusName: '李先生',
        //   qq: '565788909', // qq
        //   sex: '男',  // 性别
        //   wechat: 'dhehgk2343', // 微信
        //   wechat2: 'dhe2hgk23432', // 微信
        //   email: '1329393@qq.common', // 邮箱
        //   age: '35岁',  // 年龄
        //   imageUrl: 'http://localhost:8180/images/ad_link.png',// 图片链接
        //   Aource: '百度',// 媒介
        //   category: '百度',// 资源类别
        //   messageTime: '20191202 18:00:00',// 留言时间
        //   messagePoint: 'XXXX',// 留言重点
        //   searchWord: '移动端/pc端',// 搜索词
        //   projectName: '项目名称', // 资源项目
        //   chatList: [], // 聊天记录
        //   wechatCode: 'http://localhost:8180/images/ad_link.png'//微信二维码
        // }
        const param = { id: this.clueId };
        axios.post('/merchant/resourceTrajectory/data', param)
          .then(function (response) {
            var result = response.data;
            if (result.code == '0') {
              ocmVM.initResourcesObj = result.data
              console.log(ocmVM.format(result.data.putTime));

              ocmVM.initResourcesObj.putTime = ocmVM.format(result.data.putTime)
              ocmVM.initResourcesObj.consultTime = ocmVM.format(result.data.consultTime)
              ocmVM.initResourcesObj.createTime = ocmVM.format(result.data.createTime)
              ocmVM.initResourcesObj.assignTime = ocmVM.format(result.data.assignTime)
              if (phone == "***") {
                ocmVM.initResourcesObj.phone = phone;
                if (ocmVM.initResourcesObj.phone2) {
                  ocmVM.initResourcesObj.phone2 = phone;
                }
                if (ocmVM.initResourcesObj.phone3) {
                  ocmVM.initResourcesObj.phone3 = phone;
                }
                if (ocmVM.initResourcesObj.phone4) {
                  ocmVM.initResourcesObj.phone4 = phone;
                }
                if (ocmVM.initResourcesObj.phone5) {
                  ocmVM.initResourcesObj.phone5 = phone;
                }

              }
            }
          })
          .catch(function (error) {
            console.log(error);
          });

      },
      openWechat() {
        this.wechatVisible = true
      },
      isActiveFun() {
        // this.isActive = true;
        // this.isShowMoreBtn = false;
        this.initData();
      },
      formatNumberFn(n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      },
      formatTimeFn(date) {
        if (date) {
          var dateNew = new Date(date);
          var year = dateNew.getFullYear()
          var month = dateNew.getMonth() + 1
          var day = dateNew.getDate()
          var hour = dateNew.getHours()
          var minute = dateNew.getMinutes()
          var second = dateNew.getSeconds()
          return year + "-" + this.formatNumberFn(month) + "-" + this.formatNumberFn(day) + " " + this.formatNumberFn(hour) + ":" + this.formatNumberFn(minute) + ":" + this.formatNumberFn(second);
        }
      },
      initData() {
        var param = {};
        param.clueId = clueId;
        param.pageNum = 1;
        param.pageSize = 10;
        axios.post('/log/imLog/queryIMLogRecord', param).then(function (response) {
          var recordData = response.data;
          if (recordData) {
            console.log("333333");
            var dataList = recordData.data;
            if (dataList) {
              ocmVM.onlineRecordData = dataList;
              for (var i = 0; i < dataList.length; i++) {
                if (dataList[i].messageTime) {
                  dataList[i].messageTime = ocmVM.formatTimeFn(dataList[i].messageTime);
                }
              }
              console.log("9999999");
              if (dataList.length > 0) {
                console.log(dataList.length, "dataList.length");
                ocmVM.isShowOnlineRecordBtn = true;
                if (dataList.length > 10) {
                  ocmVM.isShowMoreBtn = true;
                } else {
                  ocmVM.isShowMoreBtn = false;
                }
              }
            }
          } else {
            ocmVM.$message({
              message: recordData.msg,
              type: 'warning'
            });
            ocmVM.isShowOnlineRecordBtn = false;
          }

        });

      },
    },
    created() {
      this.initResources();
      this.initData();
      let that = this;
      window.addEventListener("message", function (event) {
        var data = event.data;
        switch (data.cmd) {
          case 'getFormJson':
            oLink['href'] = "/css/common/resource" + event.data.params.data + ".css";
            that.usrIcon = event.data.params.data;
            // 处理业务逻辑
            break;
        }
      });
    }
  })
</script>

</html>